<template>
	<navigator :url="detailUrl">
		<div class="book-card">
			<div class="thumb" @click.stop="preview">
				<img :src="book.image" class="image" mode="aspectFit">
			</div>
			<div class="detail">
				<div class="row">
					<div class="right stress">
						{{book.rate}}
						<Rate :value="book.rate"></Rate>	
					</div>
					<div class="left stress">
						{{book.title}}
					</div>
				</div>
				<div class="row">
					<div class="right">
						浏览量&nbsp;:&nbsp;{{book.count}}
					</div>
					<div class="left">
						{{book.author}}
					</div>
				</div>
				<div class="row">
					<div class="right">
						{{book.nickname}}
					</div>
					<div class="left">
						{{book.publisher}}
					</div>
				</div>
			</div>
		</div>
	</navigator>
</template>
<script>
	import Rate from '@/components/Rate'
	export default {
		props:['book'],
		components:{
			Rate
		},
		computed:{
			detailUrl(){
				return '/pages/detail/main?id='+this.book.id
			}
		},
		methods:{
			preview(){
				wx.previewImage({
					current:this.book.image,
					urls:[this.book.image]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.book-card{
		padding:20rpx 30rpx;
		overflow:hidden;
		margin-top:5rpx;
		margin-bottom:5rpx;
		display:flex;
		.thumb{
			width: 138rpx;
			height:168rpx;
			flex:0 0 138rpx;
			.image{
				max-width:100%;
				max-height:100%;
			}
		}
		.detail{
			flex:1;
			margin-left:20rpx;
			.row{
				line-height: 52rpx;
				font-size:32rpx;
				margin-bottom:1rpx;
				color:#999999;
				.right{
					float:right;
					&.stress{
						font-size:36rpx;
						color: #e7e97d;
					}
				}
				.left{
					margin-right:10rpx;
					&.stress{
						font-size:36rpx;
						color: #e7e97d;
					}
				}
			}
			
		}
	}
</style>